<!DOCTYPE html>
<html>
<style>
    .hasNew:before {
        width: 16px;
        height: 16px;
        background: indianred;
        border-radius: 50%;
        display: block;
        content: "";
        position: absolute;
        right: 24px;
        top: 50%;
        margin-top: -8px;
    }

</style>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>

    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
    <style>
        html {
            background-color: #333;
        }

    </style>
</head>

<body>
    <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>

    <script>
        var kid = 'k001';
        var name = '客服';
        // var host = 'http://localhost/robot/public/';
          var host='https://car-api.hyuta.com';
        var avatar = host + "/back/images/userface3.jpg";
        var token = sessionStorage.getItem("token");
        layui.use('layim', function (layim) {
            //演示自动回复
            var autoReplay = [
                '您好，我现在有事不在，一会再和您联系。',
                '你没发错吧？face[微笑] ',
                '洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ',
                '你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ',
                'face[威武] face[威武] face[威武] face[威武] ',
                '<（@￣︶￣@）>',
                '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
                'face[黑线]  你慢慢说，别急……',
                '(*^__^*) face[嘻嘻] ，是贤心吗？'
            ];

            //连接端口
            // var socket = new WebSocket('ws://192.168.1.43:2000');
            var socket = new WebSocket('wss://car-api.hyuta.com:9501');

            //连接成功时触发
            socket.onopen = function () {
                console.log("连接成功")
            };

            //监听收到的消息
            socket.onmessage = function (res) {
                // console.log(res.data);
                // var obj=eval("("+res.data+")");
                // var obj = JSON.parse(res.data);

                var obj;
                if (res.data.indexOf("logout") == -1) {
                    obj = JSON.parse(res.data);
                } else {
                    obj = res.data;
                }

                if (obj.type && obj.type == 'init') {
                    var params = {
                        "from_id": kid
                    };
                    var ajaxUrl = host + '/api/chat/load';
                    $.post(ajaxUrl, params, function (res) {
                        $.each(res.data, function (i, e) {
                            var obj2 = {
                                avatar: e.from_avatar,
                                content: e.content,
                                username: e.from_name,
                                id: e.from_id, //聊天窗id
                                type: 'friend'
                            }
                            obj2.mine = false;
                            layim.getMessage(obj2);
                        })

                    })
                    var msg = {
                        from_id: kid,
                        type: 'bind'
                    }
                    socket.send(JSON.stringify(msg));
                } else if (obj.type && obj.type == 'say') {
                    var obj2 = {
                        content: obj.data,
                        name: obj.from_id,
                        username: obj.username,
                        id: obj.from_id, //聊天窗id
                        type: obj.type,
                        avatar: obj.avatar
                    }
                    obj2.type = 'friend';
                    obj2.mine = false;
                    console.log(obj);
                    layim.getMessage(obj2);
                } else if (obj.type && obj.type == 'save') {
                    //入库
                    var params = {
                        "from_id": obj.from_id,
                        "to_id": obj.to_id,
                        "is_read": obj.isRead,
                        "content": obj.data,
                        "from_name": name,
                        "from_avatar": avatar,
                    };
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        async: false,
                        url: host + '/api/chat/save',
                        data: params,
                        headers: {
                            'Authorization': token
                        },
                        success: function (res) {

                        },
                    });
                } else {

                }

                //res为接受到的值，如 {"emit": "messageName", "data": {}}
                //emit即为发出的事件名，用于区分不同的消息
            };

            socket.onerror = function () {
                console.log("onerror")
            };

            socket.onclose = function (res) {
                console.log("onclose")
            };


            //基础配置
            layim.config({

                //初始化接口
                /*init: {
                	url: 'json/getList.json',
                	data: {}
                }*/

                //或采用以下方式初始化接口

                init: {
                    mine: {
                        "username": name //我的昵称
                            ,
                        "id": kid //我的ID
                            ,
                        "status": "online" //在线状态 online：在线、hide：隐身
                            ,
                        "remark": "" //我的签名
                            ,
                        "avatar": avatar
                    }
                    //    ,friend: []
                    //    ,group: []
                }

                //查看群员接口
                /* ,members: {
                   url: 'json/getMembers.json'
                   ,data: {}
                 }*/

                //上传图片接口
                /* ,uploadImage: {
                   url: '/upload/image' //（返回的数据格式见下文）
                   ,type: '' //默认post
                 }

                 //上传文件接口
                 ,uploadFile: {
                   url: '/upload/file' //（返回的数据格式见下文）
                   ,type: '' //默认post
                 }*/

                ,
                // isAudio: true //开启聊天工具栏音频,
                // isVideo: true //开启聊天工具栏视频

                //扩展工具栏
                /* ,tool: [{
                   alias: 'code'
                   ,title: '代码'
                   ,icon: '&#xe64e;'
                 }]*/

                //,brief: true //是否简约模式（若开启则不显示主面板）

                //,title: 'WebIM' //自定义主面板最小化时的标题
                //,right: '100px' //主面板相对浏览器右侧距离
                //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离,
                initSkin: '5.jpg' //1-5 设置初始背景
                    //,skin: ['aaa.jpg'] //新增皮肤
                    //,isfriend: false //是否开启好友
                    //,isgroup: false //是否开启群组
                    //,min: true //是否始终最小化主面板，默认false
                    ,
                notice: true //是否开启桌面消息提醒，默认false
                    //,voice: false //声音提醒，默认开启，声音文件为：default.mp3

                    ,
                // msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可,
                // find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可,
                // chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可

            });


            //layim.setChatMin();

            //监听在线状态的切换事件
            layim.on('online', function (data) {
                //console.log(data);
            });

            //监听签名修改
            /*layim.on('sign', function(value){
              //console.log(value);
            });*/

            //监听自定义工具栏点击，以添加代码为例
            /*layim.on('tool(code)', function(insert){
              layer.prompt({
                title: '插入代码'
                ,formType: 2
                ,shade: 0
              }, function(text, index){
                layer.close(index);
                insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
              });
            });*/

            //监听layim建立就绪
            layim.on('ready', function (res) {

                //console.log(res.mine);

                //layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得

                //添加好友（如果检测到该socket）

            });

            //监听发送消息
            layim.on('sendMessage', function (data) {
                var To = data.to;
                var mine = data.mine;
                var msg = {
                    type: 'say',
                    avatar: avatar,
                    from_id: kid,
                    to_id: To.id,
                    username: name,
                    name: '一号客服',
                    text: mine.content
                }
                console.log(data);
                socket.send(JSON.stringify(msg));

                //  if(To.type === 'friend'){
                //    layim.setChatStatus('<span style="color:#FF5722;">对方正在输入。。。</span>');
                //  }

            });

            //监听查看群员
            layim.on('members', function (data) {
                //console.log(data);
            });

            //监听聊天窗口的切换
            layim.on('chatChange', function (res) {
                var type = res.data.type;
                console.log(res.data.id)
                if (type === 'friend') {
                    //模拟标注好友状态
                    //layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
                } else if (type === 'group') {
                    //模拟系统消息
                    layim.getMessage({
                        system: true,
                        id: res.data.id,
                        type: "group",
                        content: '模拟群员' + (Math.random() * 100 | 0) + '加入群聊'
                    });
                }
            });
        });

        //点击用户去除新消息红点
        $(document).on(".layim-chat-list li", "click", function () {
            var $this = $(this);
            $this.removeClass("hasNew");
        })

    </script>
</body>

</html>
